<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例--商品筛选</title>
    <script src="jquery.js"></script>
    <style>
        body,ul{
            margin:0; padding:0;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        .wrapper{
            width:800px;
            margin:30px auto;
            border:solid 1px #ccc;
            padding:10px 20px;
        }
        .wrapper section{
            border-bottom:dashed 1px #ccc;
            overflow: hidden;
            line-height:50px;
        }
        section strong{
            float:left;
            width:9%;
            text-align:justify;
        }
        section ul{
            width:87%;
            float:left;
        }
        section ul li{
            display:inline-block;
            padding:0 10px;
            color:blue;
            cursor: pointer;
            font-size:14px;
        }
        .choosed span{
            display:inline-block;
            line-height:35px;
            padding:0 15px;
            border:solid 1px orangered;
            font-size:14px;
            display:none;
        }
        .choosed i{
            font-style: normal;
            background:darkorange;
            color:#fff;
            line-height:25px;
            display: inline-block;
            padding:0 10px;
            margin-left:15px;
            cursor:pointer;
        }
        .clear{
            color:orangered;
            margin-left:20px;
            font-size:14px;
        }
        section ul li.selected{
            color:red;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <section>
            <strong> 品 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌: </strong>
            <ul>
                <li> 苹果 </li>
                <li> 小米 </li>
                <li> 华为 </li>
                <li> 联想 </li>
                <li> 中兴 </li>
                <li> 海信 </li>
                <li> 苹果 </li>
                <li> 小米 </li>
                <li> 华为 </li>
                <li> 联想 </li>
                <li> 中兴 </li>
                <li> 海信 </li>
                <li> 苹果 </li>
                <li> 小米 </li>
                <li> 华为 </li>
                <li> 联想 </li>
                <li> 中兴 </li>
                <li> 海信 </li>
            </ul>
        </section>
        <section>
            <strong> 价格范围 </strong>
            <ul>
                <li> 1-499 </li>
                <li> 499-799 </li>
                <li> 799-1099 </li>
                <li> 1099-1799 </li>
            </ul>
        </section>
        <section>
            <strong> 操作系统 </strong>
            <ul>
                <li> IOS </li>
                <li> 安卓 </li>
                <li> 塞班</li>
            </ul>
        </section>
        <section>
            <strong> 优惠活动 </strong>
            <ul>
                <li> 存话费送手机 </li>
                <li> 买手机送话费 </li>
                <li> 老用户优惠购机（支持合约到期提前续约） </li>
                <li> 只买手机 </li>
            </ul>
        </section>
        <section>
            <strong> 特&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点: </strong>
            <ul>
                <li> 双卡双待 </li>
                <li> 千元智能机 </li>
                <li> 大屏（4.0寸以上） </li>
            </ul>
        </section>
        <section>
            <strong> 您已选择: </strong>
            <div class="choosed">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <!--<a class="clear" href="javascript:;"> 一键清除选项 </a>-->
            </div>
        </section>
    </div>
</body>
<script>
    // 点击选项，当前样式发生改变，内容添加至选择中
    $('ul li').click(function(){
        // parent() 直系父元素， closest()最近的父级元素(匹配到就会停止)
        var li_index = $(this).closest('section').index()
        var txt = $(this).text()  + '<i>X</i> '
        $(this).addClass('selected')
                .siblings().removeClass('selected')
//        console.log(txt)
        // 内容添加至选择中的指定位置
        $('.choosed').find('span').eq(li_index)
                .html(txt).css('display', 'inline-block')
        // 一键清除按钮出现，
        var clr = "<a class='clear' id='clear' href='javascript:;'> 一键清除选项 </a>"
        var len = $('.choosed').find('span:empty').length

        if( len <= 3 ){
//            $('.clear').show()
            $('#clear').remove()
            $('.choosed').append(clr)
        }

        // 单个删除选中的选项
        $('.choosed i').click(function(){
            var index = $(this).parent().index()
            $(this).parent().text('').css('display', 'none')
            $('ul').eq(index).children().removeClass('selected')
            len = $('.choosed').find('span:empty').length
             // 判断一键删除消失的条件
            if( len >= 4 ){
                $('.clear').hide()
            }
        })
        // 一键清除
        $('.clear').click(function(){
            $('.choosed').find('span').text('').css('display', 'none')
            $('li').removeClass('selected')
//        $(this).css('display', 'none')
            $(this).remove()
        })
    })

</script>
</html>